<template>
  <div style="width: 27vw">
    <!--    <div>-->
    <!--&lt;!&ndash;      <input&ndash;&gt;-->
    <!--&lt;!&ndash;          placeholder=" search"&ndash;&gt;-->
    <!--&lt;!&ndash;          prefix-icon="el-icon-search"&ndash;&gt;-->
    <!--&lt;!&ndash;          v-model="this.$store.state.test"&ndash;&gt;-->
    <!--&lt;!&ndash;          style="margin-left:1vw;height: 7vh;width: 25vw"&ndash;&gt;-->
    <!--&lt;!&ndash;      >&ndash;&gt;-->
    <!--&lt;!&ndash;      </input>&ndash;&gt;-->
    <!--      <el-button @click="test2">hhh</el-button>-->
    <!--      <p>{{this.$store.state.newfriend.nickname}}</p>-->
    <!--    </div>-->

    <div style="height:  7vh;display: flex;cursor: pointer;">
      <el-autocomplete
          popper-class="myAutocomplete"
          v-model="input2"
          :fetch-suggestions="querySearch"
          :trigger-on-focus="false"
          placeholder="请输入内容"
          style="width: 27vw"
          @select="handleSelect"
          @input="handleChange">
        <!--          <i class="el-icon-search" style="zoom: 1.5;margin-top: 1vh;"></i>-->
        <i
            class="el-icon-search el-input__icon"
            slot="suffix"
            @click="">
        </i>
        <template slot-scope="{ item }">
          <div class="name" style="margin-bottom:-10px">{{ item.nickname }} ({{ item.account }})</div>
          <span class="addr">{{ item.motto }}</span>
        </template>
      </el-autocomplete>

    </div>

    <!--    <div>-->
    <!--      <img referrerpolicy="no-referrer" :src="this.testImg" alt="">-->
    <!--    </div>-->

    <div style="overflow-y: auto;height: 93vh;" class="scroll">
      <el-collapse>
        <el-collapse-item>
          <template slot="title">
            &nbsp&nbsp好友申请
            <el-badge v-if="this.$store.getters.hasNewFriends" value="new" class="item">
            </el-badge>
          </template>
          <div v-for="(item,index) in this.$store.state.contactlist.newfriends">
            <div style="display: flex;margin-bottom: 0.5vh">
              <div>
                <!--                <img class="avatar" :src="item.imageurl" alt="">-->
                <Avatar :img-url="item.imageurl" class-type="avatar"></Avatar>
                <!--                {{item.imageurl}}-->
              </div>
              <div>
                <div class="nickname" style="margin-bottom: 0.5vh;">
                  {{ item.nickname }}
                  <div style="float: right;zoom: 0.96">
                    <el-button v-if="item.isConform===0" size="mini" type="primary" class="buttonsize1" plain
                               @click="agreeAppliance(item)">同意
                    </el-button>

                  </div>
                </div>

                <div class="motto" style="margin-bottom: 0.5vh;">
                  申请加您为好友
                  <div style="float: right;zoom: 0.96">
                    <el-button v-if="item.isConform===0" size="mini" type="danger" class="buttonsize1" plain
                               @click="denyAppliance(item)">拒绝
                    </el-button>
                    <div v-if="item.isConform===2" style="float: right">
                      <el-button size="mini" type="info" class="buttonsize2" plain disabled>已拒绝</el-button>
                    </div>
                    <div v-if="item.isConform===1" style="float: right">
                      <el-button size="mini" type="info" class="buttonsize2" plain disabled>已同意</el-button>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item>
          <template slot="title">
            &nbsp&nbsp好友 &nbsp &nbsp
          </template>
          <div v-for="(item,index) in this.$store.state.contactlist.friends">
            <div style="display: flex" @click="changeContactDetail(item,index)">
              <div>
                <!--                <img class="avatar" :src="item.imageurl" alt="">-->
                <Avatar :img-url="item.imageurl" class-type="avatar"></Avatar>
                <!--                                {{item.imageurl}}-->
              </div>
              <div>
                <div v-if="item.remark===''">
                  <div class="nickname">
                    {{ item.nickname }}
                  </div>
                </div>
                <div v-else style="display: flex">
                  <div class="nickname">
                    {{ item.remark }}
                  </div>
                  <div class="nickname2">
                    ({{ item.nickname }})
                  </div>
                </div>

                <div class="motto">

                  <span :title="item.motto"> {{ item.motto }}</span>
                  <!--                  <marquee align="left" behavior="slide" > {{ item.motto }}</marquee >-->
                </div>
              </div>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item>
          <template slot="title">
            &nbsp&nbsp家人 &nbsp &nbsp
          </template>

          <div style="display: flex" v-for="(item,index) in this.$store.state.contactlist.family">
            <div style="display: flex" @click="changeContactDetail(item,index)">
              <div>
                <!--                <img class="avatar" :src="item.imageurl" alt="">-->
                <Avatar :img-url="item.imageurl" class-type="avatar"></Avatar>
              </div>
              <div>
                <div v-if="item.remark===''">
                  <div class="nickname">
                    {{ item.nickname }}
                  </div>
                </div>
                <div v-else style="display: flex">
                  <div class="nickname">
                    {{ item.remark }}
                  </div>
                  <div class="nickname2">
                    ({{ item.nickname }})
                  </div>
                </div>
                <div class="motto">
                  <span :title="item.motto"> {{ item.motto }}</span>
                </div>
              </div>
            </div>

          </div>

        </el-collapse-item>
        <el-collapse-item>
          <template slot="title">
            &nbsp&nbsp群组 &nbsp &nbsp
          </template>

          <div style="text-align:center;z-index: 1">
            <el-button type="info" icon="el-icon-plus" size="small" plain round @click="dialogvisible=true">创建群组
            </el-button>
          </div>
          <el-divider><i class="el-icon-mobile-phone"></i></el-divider>

          <div style="display: flex" v-for="(item,index) in this.$store.state.contactlist.group">
            <div style="display: flex" @click="changeContactDetailForGroup(item,index)">
              <div>
                <!--                <img class="avatar" :src="item.imageurl" alt="">-->
                <Avatar :img-url="item.imageurl" class-type="avatar"></Avatar>
              </div>
              <div>
                <div class="nickname">
                  {{ item.nickname }}
                </div>
                <!--                <div class="motto">-->
                <!--                  &lt;!&ndash;                  {{ item.motto }}&ndash;&gt;-->
                <!--                  <span :title="item.motto"> {{ item.motto }}</span>-->
                <!--                </div>-->
              </div>
            </div>
          </div>

        </el-collapse-item>


      </el-collapse>
    </div>
    <div style="position: fixed; left:28vw;bottom: 5vh;">
      <el-button type="primary" icon="el-icon-plus" circle @click="addFriend"></el-button>
    </div>
    <el-dialog
        title="查找"
        :visible.sync="addFriendDialog"
        width="85%"
        height="65vh"
        top="6vh"
        center>
      <el-tabs v-model="activeName" style="margin-top: -5vh;">
        <el-tab-pane label="找人" name="first">
          <div style="display: flex;">
            <el-input
                placeholder="输入昵称或账号进行搜索"
                prefix-icon="el-icon-search"
                v-model="findFriendById"
                style="width: 70%">
            </el-input>
            <div style="margin-left: 3%;width: 10vw">
              <el-radio v-model="searchWay" label="id">id搜索</el-radio>

              <el-radio style="margin-top: 1vh" v-model="searchWay" label="name">昵称搜索</el-radio>
            </div>
            <el-button type="primary" style="" @click="findFriend">查找</el-button>
          </div>
          <!--          <img class="avatar2" :src="this.$store.state.localPicture['defaultAvatar_20220604140330_1.png']" alt="">-->
          <div v-if="this.count>0&&this.foundFriendList.length===0" style="display: flex;">
            <div style="height: 52vh;margin-top: 2vh;width: 50vw">
              <el-image :src="src1"></el-image>
            </div>
            <div style="margin-top: 20vh;margin-left: 5vw">
              <el-image :src="src2"></el-image>
            </div>
          </div>
          <div v-else style="overflow: auto;height: 52vh;margin-top: 2vh;" class="scroll">
            <div style="float:left;width: 25vw;" v-for="(item,index) in foundFriendList">
              <div>
                <div style="display: flex; width: 25vw;">
                  <div>
                    <!--                    <img class="avatar2" :src="this.$store.state.localPicture['defaultAvatar_20220604140330_1.png']" alt="">-->
                    <Avatar :img-url="item.imageurl" class-type="avatar2"></Avatar>
                  </div>
                  <div style="width: 25vw;">
                    <div class="nickname" style="font-size: 14px;margin-top: 6px">
                      {{ item.nickname }}<br>({{ item.account }})
                    </div>
                    <div v-if="item.isFriend===1" style="margin-left: 10px;margin-top:3px;zoom: 0.95">
                      <el-button type="info" plain size="mini" disabled>已发送申请</el-button>
                    </div>
                    <div v-else-if="item.isFriend===0" style="margin-left: 10px;margin-top:3px;zoom: 0.95">
                      <el-button type="primary" plain size="mini" icon="el-icon-plus" @click="soleAddFriend(item)">加好友
                      </el-button>
                    </div>
                    <div v-else-if="item.isFriend===2" style="margin-left: 10px;margin-top:3px;zoom: 0.95">
                      <el-button type="info" plain size="mini" disabled>你们已经是好友了</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>


        </el-tab-pane>

        <el-tab-pane label="群聊" name="second">
          <div style="display: flex;">
            <el-input
                placeholder="输入群名或群号进行搜索"
                prefix-icon="el-icon-search"
                v-model="findGroupById"
                style="width: 70%">
            </el-input>
            <div style="margin-left: 3%;width: 10vw">
              <el-radio v-model="searchWay2" label="id">群号搜索</el-radio>
              <el-radio style="margin-top: 1vh" v-model="searchWay2" label="name">群名搜索</el-radio>
            </div>
            <el-button type="primary" style="margin-left: 1%" @click="findGroup">查找</el-button>
          </div>

          <div v-if="this.count>0&&this.foundGroup.length===0 " style="display: flex;">
            <div style="height: 52vh;margin-top: 2vh;width: 50vw">
              <el-image :src="src1"></el-image>
            </div>
            <div style="margin-top: 20vh;margin-left: 5vw">
              <el-image :src="src2"></el-image>
            </div>
          </div>
          <div v-else style="overflow: auto;height: 52vh;margin-top: 2vh;" class="scroll">
            <div style="float:left;width: 25vw;" v-for="(item,index) in foundGroup">
              <div>
                <div style="display: flex; width: 25vw;">
                  <div>
                    <!--                    <img class="avatar2" :src="item.imageurl" alt="">-->
                    <Avatar :img-url="item.imageurl" class-type="avatar2"></Avatar>
                  </div>
                  <div style="width: 25vw;">
                    <div class="nickname" style="font-size: 14px;margin-top: 6px">
                      {{ item.nickname }}<br>({{ item.account }})
                    </div>
                    <div>
                      <div v-if="item.isGroup===0" style="margin-left: 10px;margin-top:3px;zoom: 0.95">
                        <el-button type="primary" plain size="mini" icon="el-icon-plus" @click="AddGroup(item)">加入群聊
                        </el-button>
                      </div>
                      <div v-else style="margin-left: 10px;margin-top:3px;zoom: 0.95">
                        <el-button type="primary" plain size="mini" icon="el-icon-check" disabled>已加入</el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

      </el-tabs>
    </el-dialog>

    <el-dialog
        title="创建群组"
        :visible.sync="dialogvisible"
        width="85%"
        height="65vh"
        top="6vh"
        center
    >
      <el-form :model="form">
        <el-form-item label="群组名称">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入群组名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogvisible = false">取 消</el-button>
        <el-button type="primary" @click="createGroup">确 定</el-button>
      </div>

    </el-dialog>
  </div>


</template>

<script>
import axios from "axios";
import Avatar from "./Avatar";
import vue from "vue";

export default {
  name: "ContactList",
  components: {
    Avatar
  },
  data() {
    return {
      form: {},
      count: 0,
      searchContact: [
        {"nickname": "三全鲜食（北新泾店）", "account": "长宁区新渔路144号", "motto": "yiyyiyiya"},
        {"nickname": "北新泾店）", "account": "长宁区新渔路144号", "motto": "zzzzz"},
        {"nickname": "新旺角茶餐厅", "account": "新旺角茶餐厅号", "motto": "www"},
      ],
      searchWay: "id",
      searchWay2: "id",
      testImg: "",
      src1: require('../../assets/Images/perplex.gif'),
      src2: require('../../assets/Images/not_found_font.png'),
      addFriendDialog: false,
      dialogvisible: false,
      isFoundFriend: true,
      isFoundGroup: false,
      findFriendById: "",
      findGroupById: "",
      input2: "",
      activeName: "first",
      foundFriendList: [],
      foundGroup: []
    }
  },
  mounted() {
    this.$store.dispatch('initContact')
    axios.get("http://81.70.70.110:4396/contact/get", {
      params: {
        userId: localStorage.getItem("u_id")
      }, headers: {
        token: localStorage.getItem("u_token")
      }
    }).then((res) => {
      let str1 = [];
      str1 = res.data.data;
      for (let i = 0; i < str1.length; i++) {
        let friend = {};
        friend.account = str1[i].userId;
        friend.nickname = str1[i].userName;
        friend.imageurl = str1[i].userAvatar;
        friend.motto = str1[i].sign;
        friend.remark = str1[i].remark;
        friend.group = str1[i].group;
        if (friend.group === "好友") {
          this.$store.dispatch('insertFriend', friend)
        } else {
          this.$store.dispatch('insertFamily', friend)
        }
      }
    })

    axios.get("http://81.70.70.110:4396/contact/group", {
      params: {
        userId: localStorage.getItem("u_id")
      }, headers: {
        token: localStorage.getItem("u_token")
      }
    }).then((res) => {
      let str1 = [];
      str1 = res.data.data;
      for (let i = 0; i < str1.length; i++) {
        let temp = {};
        temp.account = str1[i].groupId;
        temp.nickname = str1[i].groupName;
        temp.imageurl = str1[i].avatar;
        temp.group = "group";
        this.$store.state.contactlist.group.splice(0, 0, temp)
      }
    })
  },
  methods: {
    createGroup() {
      this.dialogvisible = false;
      axios.post("http://81.70.70.110:4396/contact/create", null, {
        params: {
          groupName: this.form.name,
          userId: localStorage.getItem("u_id")
        }, headers: {
          token: localStorage.getItem("u_token")
        }
      }).then((res) => {
        this.$message({
          message: '创建群组成功',
          type: 'success'
        });
        let temp = {};
        temp.account = res.data.data.groupId;
        temp.nickname = this.form.name;
        temp.imageurl = "defaultAvatar_20220604140330_1.png";
        temp.group = "group"
        temp.isGroup = 0;
        this.$store.state.contactlist.group.splice(0, 0, temp)
      })
    },
    test2() {
      this.$store.state.newfriend = {
        imageurl: "defaultAvatar_20220604140330_1.png\n",
        nickname: "123456",
        senderId: 2,
        isConform: 0//正在申请
      };
    },
    handleChange() {
      this.searchContact.splice(0, this.searchContact.length)
      axios.get("http://81.70.70.110:4396/account/info", {
        params: {
          key: "name",
          scope: "contact",
          value: this.input2
        },
        headers: {
          token: localStorage.getItem("u_token")
        }
      }).then((res) => {
        let str1 = res.data.data;
        for (let i = 0; i < str1.length; i++) {
          let temp = {};
          temp.account = str1[i].userId;
          temp.nickname = str1[i].userName;
          temp.imageurl = str1[i].userAvatar;
          temp.motto = str1[i].sign;
          this.searchContact.splice(0, 0, temp)
        }
        this.querySearch()
      })
    },
    //点击选项的时候触发
    handleSelect(item) {
      this.input2 = item.nickname;
      for (let i = 0; i < this.$store.state.contactlist.friends.length; i++) {
        if (item.account === this.$store.state.contactlist.friends[i].account) {
          this.$store.state.show_person_info = JSON.parse(JSON.stringify(this.$store.state.contactlist.friends[i]))
          break;
        }
      }
      for (let i = 0; i < this.$store.state.contactlist.family.length; i++) {
        if (item.account === this.$store.state.contactlist.family[i].account) {
          this.$store.state.show_person_info = JSON.parse(JSON.stringify(this.$store.state.contactlist.family[i]))
          break;
        }
      }
    },
    //返回建议列表
    querySearch(queryString, cb) {
      // 调用 callback 返回建议列表的数据
      cb(this.searchContact);
    },
    AddGroup(item) {
      item.isGroup = 1;
      axios.post("http://81.70.70.110:4396/contact/join", null, {
        params: {
          groupId: item.account,
          userId: localStorage.getItem("u_id")
        },
        headers: {
          token: localStorage.getItem("u_token")
        }
      }).then((res) => {
        this.$store.state.contactlist.group.splice(0, 0, item)
      })
    },
    findGroup() {
      axios.get("http://81.70.70.110:4396/contact/info", {
        params: {
          key: this.searchWay2,
          scope: "stranger",
          userId: localStorage.getItem("u_id"),
          value: this.findGroupById
        },
        headers: {
          token: localStorage.getItem("u_token")
        }
      }).then((res) => {
        this.foundGroup.splice(0, this.foundGroup.length)
        let str1 = res.data.data;
        if (this.searchWay2 === "id") {
          let temp = {};
          temp.account = str1.groupId;
          temp.nickname = str1.groupName;
          temp.imageurl = str1.avatar;
          temp.group = "group"
          temp.isGroup = 0;
          this.foundGroup.splice(0, 0, temp)
        } else {
          for (let i = 0; i < str1.length; i++) {
            let temp = {};
            temp.account = str1[i].groupId;
            temp.nickname = str1[i].groupName;
            // temp.motto = str1[i].sign;
            temp.group = "group"
            temp.isGroup = 0;
            temp.imageurl = str1[i].avatar;
            this.foundGroup.splice(0, 0, temp)
          }
        }

      })
    },
    soleAddFriend(item) {
      item.isFriend = 1;
      axios.post("http://81.70.70.110:4396/contact/request", null, {
        params: {
          contactId: item.account,
          type: "request",
          userId: localStorage.getItem("u_id")
        },
        headers: {
          token: localStorage.getItem("u_token")
        }
      }).then((res) => {

      })

    },
    findFriend() {
      this.count++;
      axios.get("http://81.70.70.110:4396/account/info", {
        params: {
          key: this.searchWay,
          scope: "stranger",
          value: this.findFriendById
        },
        headers: {
          token: localStorage.getItem("u_token")
        }
      }).then((res) => {
        this.foundFriendList.splice(0, this.foundFriendList.length)
        let str1 = res.data.data;
        if (this.searchWay === "id") {
          let temp = {};
          temp.account = str1.userId;
          temp.nickname = str1.userName;
          temp.imageurl = str1.userAvatar;
          temp.motto = str1.sign;
          temp.group = "好友"
          temp.remark = ""
          temp.isFriend = 0;
          this.foundFriendList.splice(0, 0, temp)
        } else {
          for (let i = 0; i < str1.length; i++) {
            let temp = {};
            temp.account = str1[i].userId;
            temp.nickname = str1[i].userName;
            temp.motto = str1.sign;
            temp.group = "好友"
            temp.remark = ""
            temp.isFriend = 0;
            temp.imageurl = str1[i].userAvatar;
            this.foundFriendList.splice(0, 0, temp)
          }
        }
      })
    },
    denyAppliance(item) {
      item.isConform = 2;
    },
    agreeAppliance(item) {
      item.isConform = 1;
      console.log(item)

      axios.post("http://81.70.70.110:4396/contact/request", null, {
        params: {
          contactId: item.senderId,
          type: "response",
          userId: localStorage.getItem("u_id")
        },
        headers: {
          token: localStorage.getItem("u_token")
        }
      }).then((res) => {
        //获取这个sender的信息，并将其加入好友列表
        axios.get("http://81.70.70.110:4396/account/info", {
          params: {
            key: "id",
            scope: "all",
            value: item.senderId
          },
          headers: {
            token: localStorage.getItem("u_token")
          }
        }).then((res1) => {
          let str1 = res1.data.data;
          let friend = {};
          friend.account = str1.userId;
          friend.nickname = str1.userName;
          friend.imageurl = str1.userAvatar;
          friend.motto = str1.sign;
          friend.group = "好友"
          friend.remark = ""
          this.$store.dispatch('insertFriend',friend)
        })
      })
    },
    test() {
      alert("success")
    },
    changeContactDetail(item, index) {
      this.$store.dispatch('setPersonInfo', {
        nickname: item.nickname,
        motto: item.motto,
        account: item.account,
        imageurl: item.imageurl,
        remark: item.remark,
        group: item.group,
        index: index,
      })
    },
    changeContactDetailForGroup(item, index) {
      this.$store.dispatch('setPersonInfo', {
        nickname: item.nickname,
        account: item.account,
        imageurl: item.imageurl,
        group: "group",
        index: index,
      })
    },
    addFriend() {
      this.addFriendDialog = true;
    },
  }
}
</script>

<style scoped>
.myAutocomplete {
  line-height: normal;
  padding: 7px;
}

.name {
  text-overflow: ellipsis;
  overflow: hidden;
}

.addr {
  font-size: 12px;
  color: #b4b4b4;
}

.highlighted .addr {
  color: #ddd;
}

.buttonsize2 {
  height: 4vh;
  font-size: 2.2vh;
}

.buttonsize1 {
  height: 4vh;
  font-size: 2.2vh;
}

input {
  border: none;
  -webkit-appearance: none; /*去除阴影边框*/
  outline: none;
  -webkit-tap-highlight-color: gray; /*点击高亮的颜色*/
}

.nickname {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "黑体", Arial, sans-serif;
  font-size: 13px;
  margin-left: 10px;
  font-weight: bold;
}

.nickname2 {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "黑体", Arial, sans-serif;
  font-size: 13px;
  margin-left: 10px;
  font-weight: bold;
  color: lightgray;
}

.motto {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑 Light", Arial, sans-serif;
  font-size: 12px;
  margin-left: 10px;
  color: gray;
  width: 20vw;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}


.avatar {
  background-color: gray;
  width: 40px;
  height: 40px;
  margin: 0 0 0 10px;
  /*圆角方形*/
  border-radius: 10px;
  /*圆形头像*/
  /*border-radius: 50%;*/
}

.avatar2 {
  background-color: gray;
  width: 60px;
  height: 60px;
  margin: 10px 0 0 10px;
  /*圆形头像*/
  border-radius: 50%;
}

.scroll {
  margin: auto;
  overflow: auto;

}

.scroll::-webkit-scrollbar {

  width: 10px;

  height: 10px;

}

/*正常情况下滑块的样式*/

.scroll::-webkit-scrollbar-thumb {

  background-color: rgba(0, 0, 0, .05);

  border-radius: 10px;

  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);

}

/*鼠标悬浮在该类指向的控件上时滑块的样式*/

.scroll:hover::-webkit-scrollbar-thumb {

  background-color: rgba(0, 0, 0, .2);

  border-radius: 10px;

  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);

}

/*鼠标悬浮在滑块上时滑块的样式*/

.scroll::-webkit-scrollbar-thumb:hover {

  background-color: rgba(0, 0, 0, .4);

  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);

}

/*正常时候的主干部分*/

.scroll::-webkit-scrollbar-track {

  border-radius: 10px;

  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);

  background-color: white;

}

/*鼠标悬浮在滚动条上的主干部分*/

.scroll::-webkit-scrollbar-track:hover {

  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);

  background-color: rgba(0, 0, 0, .01);

}
</style>
